<template>
  <div class="home">
	 
	<!-- 路由渲染 -->
	  <router-view></router-view>
	  <div class="bottom_div">
		  <div class="tab_div" v-for="(item,index) in tabList" @click="change(index)">
			  <router-link :to="item.to">
		  <img :src="index == selected ? item.activeUrl : item.url" />
		  <p :class="{color_active:index==selected}">{{item.text}}</p>
		  </router-link>
		  </div>
	  </div>
  </div>

</template>

<script>

export default {
  data(){
	  return{
		  tabList:[
			  {
							  url:require("../assets/home/tab_home.png"),
							  activeUrl:require("../assets/home/tab_home_active.png"),
							  text:"首页",
							  to:"/home"
			  },
			  {
			  				  url:require("../assets/home/tab_shopcart.png"),
			  				  activeUrl:require("../assets/home/tab_shopcart_active.png"),
			  				  text:"购物车",
							  to:"/home/shopcat"
			  },
			  {
			  				  url:require("../assets/home/tab_orders.png"),
			  				  activeUrl:require("../assets/home/tab_orders_active.png"),
			  				  text:"订单",
							  to:"/home/order"
			  },
			  {
			  				  url:require("../assets/home/tab_mine.png"),
			  				  activeUrl:require("../assets/home/tab_mine_active.png"),
			  				  text:"我的",
							  to:"/home/mine"
			  }
		  ],
		  selected:0
	  }
  },
  methods:{
	  change:function(index){
		  this.selected=index
	  }
  }
}
</script>

<style Lang="less" scoped>
	
	.bottom_div{
		background: #f1f1f1;
		height: 49px;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		align-items: center;
		padding-top: 10px;
	}
	.tab_div img{
		height: 20px;
		width: 20px;
	}
	.tab_div p{
		font-size: 10px;
		color: #333333;
	}
	.tab_div{
		flex: 1;
	}
	.bottom_div .tab_div{
		text-align: center;
	}
	.tab_div .color_active{
		color: #1FA4FC;
	}
</style>
